<template>
  <div id="profile">
    <van-icon name="bars" badge="" size="25" @click="showPopup" />
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '60%', background: '#eefffd' }"
    >
      <div
        v-if="wangyiyunInfo"
        class="profilepicture"
        v-for="(item, index) in mylist"
        :key="index"
      >
        <div class="picture">
          <img
            :src="wangyiyunInfo.profile.avatarUrl"
            width="100%"
            height="100%"
          />
        </div>
        <div class="useruname">{{ wangyiyunInfo.profile.nickname }}</div>
        <div class="righticon">
          <span
            class="bobafont bobamusic-youjiantou1"
            @click="goMypage()"
          ></span>
        </div>
      </div>
      <div
        v-else
        class="profilepicture"
        v-for="(item, index) in mylist"
        :key="index"
      >
        <div class="picture">
          <img :src="item.url" width="100%" height="100%" />
        </div>
        <div class="useruname">{{ item.name }}</div>
        <div class="righticon">
          <span
            class="bobafont bobamusic-youjiantou1"
            @click="goMypage()"
          ></span>
        </div>
      </div>
      <ul></ul>
      <span
        @click="logout"
        style="position: absolute; bottom: 10px; left: 10px; font-size: 30px"
        class="bobafont bobamusic-tuichu"
      ></span>
    </van-popup>
    <div class="my">
      <div class="mymessage" v-for="(item, index) in mylist" :key="index">
        <div class="mypicture">
          <img :src="item.url" width="100%" height="100%" />
        </div>
        <div v-if="userInfo == null" class="myname" @click="gologin">
          {{ item.name }}
        </div>
        <div v-else class="myname">{{ userInfo.username }}</div>
      </div>
      <div class="myinformation" @click="goMypage()">
        <span class="bobafont bobamusic-youjiantou1"></span>
      </div>
    </div>
    <div class="mynavigation">
      <div @click="myfunction()">
        <span class="bobafont bobamusic-bendiwenjian"></span>
        <p>本地/下载</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-yunpan"></span>
        <p>云盘</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-yigoushuliang"></span>
        <p>已购</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-iconset0481"></span>
        <p>最近播放</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-wodehaoyou"></span>
        <p>我的好友</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-shoucang"></span>
        <p>收藏和赞</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-icon-test"></span>
        <p>我的博客</p>
      </div>
      <div @click="myfunction()">
        <span class="bobafont bobamusic-tianjia"></span>
        <p>音乐应用</p>
      </div>
    </div>
  </div>
</template>

<script>
import { loginWangyiyun } from "network/api/ProfileApi";
export default {
  data() {
    return {
      show: false,
      arrlist: [],
      mylist: [
        {
          url:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3041701001,1968583786&fm=11&gp=0.jpg",
          name: "请登录",
        },
      ],
      userInfo: null,
      wangyiyunInfo: null,
    };
  },
  mounted() {
    console.log("我的");
    this.$store.commit("setCurrentView", 3);
    // 初始化用户信息
    let userStr = this.$cookie.get("userInfo");
    if (userStr != null && userStr != "") {
      this.userInfo = JSON.parse(userStr);
      // 登录网易云获取信息
      console.log();
      let wangyiyunInfo = this.$cookie.get("wangyiyunInfo");
      if (wangyiyunInfo != null && wangyiyunInfo != "") {
        this.wangyiyunInfo = JSON.parse(this.$cookie.get("wangyiyunInfo"));
        console.log(this.wangyiyunInfo);
      } else {
        loginWangyiyun({
          phone: this.userInfo.bindU,
          password: this.userInfo.bindP,
        }).then((res) => {
          this.$cookie.set("wangyiyunInfo", JSON.stringify(res.data), "15d");
          console.log(res);
        });
      }
    } else {
    }
  },
  methods: {
    goMypage() {
      this.$router.push({ name: "mypage" });
    },
    showPopup() {
      this.show = true;
    },
    myfunction() {
      this.$toast("此功能还在开发中，敬请期待");
    },
    gologin() {
      this.$router.push({ path: "/login" });
    },
    logout() {
      // 清除本地cookie
      console.log(this.$cookie.get("wangyiyunInfo"));
      console.log(this.$cookie.get("userInfo"));
      this.userInfo = null;
      this.wangyiyunInfo = null;
      this.$cookie.delete("wangyiyunInfo");
      this.$cookie.delete("userInfo");
      this.$store.commit("setLoginState", false);
    },
  },
};
</script>

<style>
#profile .my {
  width: 90%;
  height: 70px;
  /* background: red; */
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
#profile ul {
  margin: 20px;
}
#profile ul li {
  margin-top: 10px;
  font-size: 20px;
}
#profile .profilepicture {
  width: 80%;
  height: 8%;
  display: flex;
  margin: 0 auto;
  margin-top: 20px;
  /* background: pink; */
  justify-content: space-between;
}
#profile .profilepicture .picture {
  width: 30%;
  height: 100%;
  background: red;
}
#profile .profilepicture .picture img {
  border-radius: 50%;
}
#profile .profilepicture .useruname {
  width: 50%;
  height: 100%;
  /* margin-left: 10px; */
  margin-left: 10px;
  /* background: greenyellow; */
  font-size: 18px;
  color: #2ae0c8;
  line-height: 53px;
}
#profile .profilepicture .righticon {
  width: 15%;
  height: 100%;
  /* background: indigo; */
}
#profile .profilepicture .righticon .bobafont {
  font-size: 25px;
  color: rgb(199, 197, 197);
  line-height: 53px;
}
#profile .van-icon {
  margin: 10px;
  color: #2ae0c8;
}
#profile .my .mymessage {
  width: 80%;
  height: 100%;
  /* background: beige; */
  display: flex;
  justify-content: space-between;
}
#profile .my .mymessage .mypicture {
  width: 25%;
  height: 85%;
  margin-top: 3px;
  /* background: chartreuse; */
  border-radius: 50%;
  border: 3px solid #fff;
  margin-left: 10px;
}
#profile .my .mymessage .mypicture img {
  border-radius: 50%;
}
#profile .my .mymessage .myname {
  width: 70%;
  height: 100%;
  /* background: chocolate;  */
  line-height: 70px;
  font-size: 20px;
  margin-left: 10px;
  color: #2ae0c8;
}
#profile .my .myinformation {
  width: 10%;
  height: 100%;
  /* background: blue; */
}
#profile .my .myinformation .bobafont {
  font-size: 30px;
  color: #fff;
  line-height: 70px;
  margin-left: 10px;
}
#profile .mynavigation {
  width: 90%;
  height: 200px;
  background: #eefffd;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-evenly;
}
#profile .mynavigation div {
  width: 23%;
  height: 30%;
  /* background: fuchsia; */
  display: flex;
  flex-direction: column;
}
#profile .mynavigation div p {
  margin: 0 auto;
  font-size: 15px;
  color: #2ae0c8;
}
#profile .mynavigation div .bobafont {
  color: #aaf1e8;
  font-size: 35px;
  margin: 0 auto;
}
</style>